<template>
    <div class="message">
        <div class="message-header">
            <div class="mb-2 pl-2">
                <a-select
                    mode="tags"
                    placeholder="Please select"
                    :value="selectedTags"
                    style="width: 442px;"
                    :dropdownMenuStyle="{display: 'none'}"
                    @change="handleChange"
                ></a-select>
                <a-button type="primary" class="mx-2">搜索</a-button>
                <a-button type="danger" @click="clearAll">&times;清除筛选项</a-button>
            </div>
            <div>
                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'user')">
                        <a-menu-item key="张xx">
                            <a-icon type="user"/>
                            张xx
                        </a-menu-item>
                        <a-menu-item key="李xx">
                            <a-icon type="user"/>
                            李xx
                        </a-menu-item>
                        <a-menu-item key="王xx">
                            <a-icon type="user"/>
                            王xx
                        </a-menu-item>
                        <a-menu-item key="刘xx">
                            <a-icon type="user"/>
                            刘xx
                        </a-menu-item>
                    </a-menu>

                    <a-button style="margin-left: 8px">发布者
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>

                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'publishDate')">
                        <a-menu-item key="当日">
                            <a-icon type="clock-circle"/>
                            当日
                        </a-menu-item>
                        <a-menu-item key="近三天">
                            <a-icon type="clock-circle"/>
                            近三天
                        </a-menu-item>
                        <a-menu-item key="近一周">
                            <a-icon type="clock-circle"/>
                            近一周
                        </a-menu-item>
                        <a-menu-item key="超过一周">
                            <a-icon type="clock-circle"/>
                            超过一周
                        </a-menu-item>
                    </a-menu>

                    <a-button style="margin-left: 8px">发布时间
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>

                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'msgTypes')">
                        <a-menu-item key="宿舍信息类">
                            <a-icon type="mail"/>
                            宿舍信息类
                        </a-menu-item>
                        <a-menu-item key="缴费通知类">
                            <a-icon type="mail"/>
                            缴费通知类
                        </a-menu-item>
                        <a-menu-item key="工作通知类">
                            <a-icon type="mail"/>
                            工作通知类
                        </a-menu-item>
                        <a-menu-item key="其他类">
                            <a-icon type="mail"/>
                            其他类
                        </a-menu-item>
                    </a-menu>

                    <a-button style="margin-left: 8px">消息类型
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>

                <a-dropdown>
                    <a-menu slot="overlay" @click="handleMenuClick($event,'degree')">
                        <a-menu-item key="严重">
                            <a-icon type="info-circle"/>
                            严重
                        </a-menu-item>
                        <a-menu-item key="重要">
                            <a-icon type="info-circle"/>
                            重要
                        </a-menu-item>
                        <a-menu-item key="次要">
                            <a-icon type="info-circle"/>
                            次要
                        </a-menu-item>
                        <a-menu-item key="不重要">
                            <a-icon type="info-circle"/>
                            不重要
                        </a-menu-item>
                    </a-menu>

                    <a-button style="margin-left: 8px">
                        紧急程度
                        <a-icon type="down"/>
                    </a-button>
                </a-dropdown>
            </div>
        </div>
        <hr>
        <div class="message-body">
            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">缴费通知</h5>
                    <p class="card-text">你本月缴费单已生成，请前往缴费!</p>
                    <div class="d-flex justify-content-between">
                        <a href="#" class="btn btn-danger">删除</a>

                        <div class="d-flex justify-content-between w-50">
                            <a href="#" class="btn btn-info">缴费通知</a>
                            <a href="#" class="btn btn-danger">严重</a>
                            <span>蔡徐坤</span>
                            <span>2021/1/1</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">宿舍通知</h5>
                    <p class="card-text">恭喜你，宿舍申请成功!</p>
                    <div class="d-flex justify-content-between">
                        <a href="#" class="btn btn-danger">删除</a>
        
                        <div class="d-flex justify-content-between w-50">
                            <a href="#" class="btn btn-info">宿舍通知</a>
                            <a href="#" class="btn btn-danger">次要</a>
                            <span>马保国</span>
                            <span>2021/1/2</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">合同通知</h5>
                    <p class="card-text">恭喜你，合同审核完成!</p>
                    <div class="d-flex justify-content-between">
                        <a href="#" class="btn btn-danger">删除</a>
        
                        <div class="d-flex justify-content-between w-50">
                            <a href="#" class="btn btn-info">工作通知</a>
                            <a href="#" class="btn btn-danger">次要</a>
                            <span>二仙桥大爷</span>
                            <span>2021/1/3</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Message",
    data() {
        return {
            map: new Map(),
            selectedTags: []
        }
    },
    methods: {
        onSearch(val) {
            console.log(val);
        },
        handleMenuClick(e, type) {
            this.map.set(type,e.key);
            this.render();
        },
        render(){
            this.selectedTags = Object.values(Object.fromEntries(this.map));
        },
        handleChange(tags) {
            const deleteValue = this.selectedTags.filter(t=>!tags.includes(t))[0];
            for (const [k,v] of this.map.entries()) {
                if (v=== deleteValue){
                    this.map.delete(k);
                    this.render();
                }
            }
        },
        clearAll(){
            this.map.clear();
            this.render();
        }
    }
}
</script>

<style scoped>
</style>
